<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="监控名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入监控名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['video:video:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['video:video:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete(2)"
          v-hasPermi="['video:video:remove']"
          >删除</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="postList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="项目编号" align="center" prop="pro_number" />
      <el-table-column label="状态" align="center" prop="pro_statusid">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_project_status"
            :value="scope.row.pro_statusid"
          />
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center" prop="pro_name" />
      <el-table-column label="项目周期" align="center" prop="pro_start">
        <template slot-scope="scope">
          <div>{{ scope.row.pro_start }}</div>
          <div>至</div>
          <div>{{ scope.row.pro_end }}</div>
        </template>
      </el-table-column>
      <el-table-column label="当前阶段及负责人" align="center" prop="st_name">
        <template slot-scope="scope">
          <span>{{ scope.row.st_name }}-</span>
          <span>{{ scope.row.st_headname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center" prop="user_name" />
      <!-- <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:post:edit']"
            >查看</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :inline="true"
        label-width="80px"
        style="text-align: center"
      >
        <el-form-item label="项目名称" prop="proName">
          <el-input
            v-model="form.proName"
            placeholder="请输入岗位名称"
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item label="项目状态" prop="proStatusid">
          <el-select
            v-model="form.proStatusid"
            placeholder="请选择"
            style="width: 220px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="proStart">
          <el-date-picker
            v-model="form.proStart"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="proEnd">
          <el-date-picker
            v-model="form.proEnd"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目负责" prop="proHead">
          <el-input
            v-model="proHead"
            placeholder="请输入内容"
            @click.native="inputClick"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目成员" prop="proPerson">
          <el-input
            v-model="proPerson"
            placeholder="请输入内容"
            @click.native="inputClick2"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目内容" prop="proInfo">
          <el-input
            v-model="form.proInfo"
            type="textarea"
            placeholder="请输入内容"
            style="width: 500px"
            :rows="6"
          />
          
        </el-form-item>
      </el-form>
      <!-- ssssssssssssssssssssssssss -->

      <div>
        <!-- <div>

          <el-form :model="studentData" ref="data" label-width="auto">
            <el-table
              border
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              :data="studentData"
              ref="table"
              style="width: 100%"
            >
              <el-table-column align="center" label="项目阶段" width="220">
                <template slot-scope="scope">

                  <el-form-item :prop="scope.$index + '.stName'">
                    <el-input
                      v-model="studentData[scope.$index].stName"
                      autocomplete="off"
                      size="small"
                      placeholder=""
                      ><template slot="prepend"
                        >第{{ studentData[scope.$index].stStage }}阶段</template
                      ></el-input
                    >
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column align="center" label="负责人">
                <template slot-scope="scope">
                  <el-form-item :prop="scope.$index + '.stHead'">
                    <el-input
                      v-model="studentData2[scope.$index].stHead"
                      autocomplete="off"
                      size="small"
                      placeholder=""
                      @click.native="inputClickS1(scope)"
                    ></el-input>
                  </el-form-item>

                  <el-dialog
                    width="30%"
                    title="选择负责人"
                    :visible.sync="innerVisible3"
                    append-to-body
                  >
                    <el-tree
                      v-model="studentData[scope.$index].stHead"
                      :data="deptOptions"
                      :props="defaultProps"
                      :expand-on-click-node="false"
                      :show-checkbox="true"
                      ref="treeproHead3"
                      node-key="value"
                      :check-strictly="true"
                      default-expand-all
                      highlight-current
                      @check="change3"
                    />
                    <div
                      slot="footer"
                      class="dialog-footer"
                      style="text-align: center"
                    >
                      <el-button type="primary" @click="innerVisible3 = false"
                        >确 定</el-button
                      >
                    </div>
                  </el-dialog>
                </template>
              </el-table-column>

              <el-table-column align="center" label="成员">
                <template slot-scope="scope">
                  <el-form-item :prop="scope.$index + '.stPerson'">
                    <el-input
                      v-model="studentData2[scope.$index].stPerson"
                      autocomplete="off"
                      size="small"
                      placeholder=""
                      @click.native="inputClickS2(scope)"
                    ></el-input>
                  </el-form-item>
                  <el-dialog
                    width="30%"
                    title="选择成员"
                    :visible.sync="innerVisible4"
                    append-to-body
                  >
                    <el-tree
                      v-model="studentData[scope.$index].stPerson"
                      :data="deptOptions"
                      :props="defaultProps"
                      :expand-on-click-node="false"
                      :show-checkbox="true"
                      ref="treeproHead4"
                      node-key="value"
                      :check-strictly="true"
                      default-expand-all
                      highlight-current
                      @check="change4"
                    />
                    <div
                      slot="footer"
                      class="dialog-footer"
                      style="text-align: center"
                    >
                      <el-button type="primary" @click="quedingba()"
                        >确 定</el-button
                      >
                    </div>
                  </el-dialog>
                </template>
              </el-table-column>
              <el-table-column align="center" label="开始日期" width="180px">
                <template slot-scope="scope">
                  <el-form-item :prop="scope.$index + '.stStart'">
                    <el-date-picker
                      v-model="studentData[scope.$index].stStart"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="开始时间"
                      style="width: 150px"
                    >
                    </el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" label="结束日期" width="180px">
                <template slot-scope="scope">
                  <el-form-item :prop="scope.$index + '.stEnd'">
                    <el-date-picker
                      v-model="studentData[scope.$index].stEnd"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="结束时间"
                      style="width: 150px"
                    >
                    </el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click="handleDeleteRow(studentData[scope.$index])"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div> -->

        <div
          slot="footer"
          class="dialog-footer"
          style="text-align: center; margin-top: 20px"
        >
          <!-- <el-button @click="addRow">新增流程</el-button> -->
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>

      <!-- sssssssssssssssssssssssssssssssssss -->

      <el-dialog
        width="30%"
        title="选择负责人"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-tree
          v-model="form.proHead"
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :show-checkbox="true"
          ref="treeproHead"
          node-key="value"
          :check-strictly="true"
          default-expand-all
          highlight-current
          @check="change"
        />
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="primary" @click="innerVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        width="30%"
        title="选择成员"
        :visible.sync="innerVisible2"
        append-to-body
      >
        <el-tree
          v-model="form.proPerson"
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :show-checkbox="true"
          ref="tree"
          node-key="value"
          default-expand-all
          highlight-current
          @check="change2"
        />
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="primary" @click="innerVisible2 = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { listProject, addProject, addStage } from "@/api/project/list";
import { listUser, deptTreeSelect2 } from "@/api/system/user";
export default {
  name: "Project",
  dicts: ["sys_project_status"],
  data() {
    return {
      // 遮罩层
      loading: true,
      innerVisible: false,
      innerVisible2: false,
      innerVisible3: false,
      innerVisible4: false,
      scopeIndex: "",
      // 选中数组
      ids: [],
      studentData: [
        {
          stStage: 1,
          stName: "",
          stHead: "",
          stStart: "",
          stEnd: "",
          stTask: "",
          stPerson: "",
        },
        {
          stStage: 2,
          stName: "",
          stHead: "",
          stStart: "",
          stEnd: "",
          stTask: "",
          stPerson: "",
        },
      ],
      studentData2: [
        {
          stStage: 1,
          stName: "",
          stHead: "",
          stStart: "",
          stEnd: "",
          stTask: "",
          stPerson: "",
        },
        {
          stStage: 2,
          stName: "",
          stHead: "",
          stStart: "",
          stEnd: "",
          stTask: "",
          stPerson: "",
        },
      ],
      // 部门树选项
      deptOptions: undefined,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      defaultProps: {
        children: "childrenList",
        label: "label",
        disabled: function (data, node) {
          //带子级的节点不能选中
          // console.log(data.type);
          if (data.type == "DEPT") {
            return true;
          } else {
            return false;
          }
        },
      },
      proPerson: null,
      proHead: null,
      stage: {
        domains: [
          {
            stName: "",
          },
        ],
      },
      options: [
        {
          value: "0",
          label: "已完成",
        },
        {
          value: "1",
          label: "已开始",
        },
        {
          value: "2",
          label: "未开始",
        },
      ],
      // 总条数
      total: 0,
      rowlength: "",
      // 岗位表格数据
      postList: [],
      // 岗位选项
      postOptions: [],
      // 弹出层标题
      title: "",
      haha: [],
      haha2: [],
      haha3: [],
      peoplelist: [],
      msgId: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      form2: {},
      // 表单校验
      rules: {
        proName: [
          { required: true, message: "气体名称不能为空", trigger: "blur" }
        ],
        proStatusid: [
          { required: true, message: "报警值不能为空", trigger: "blur" }
        ],
        proStart: [
          { required: true, message: "设备编号不能为空", trigger: "blur" }
        ],
        proEnd: [
          { required: true, message: "区域不能为空", trigger: "blur" }
        ],
        proHead: [
          { required: true, message: "气体顺序不能为空", trigger: "blur" }
        ],
        proPerson: [
          { required: true, message: "气体顺序不能为空", trigger: "blur" }
        ],
        proInfo: [
          { required: true, message: "气体顺序不能为空", trigger: "blur" }
        ]
      },
    };
  },
  created() {
    this.getList();
    this.getDeptTree();
  },
  methods: {
    quedingba() {

      this.innerVisible4 = false
    },
    addRow() {
      let index = this.studentData.length;
      console.log("index", index);
      this.studentData.push({
        stStage: index + 1,
        stName: "",
        stHead: "",
        stStart: "",
        stEnd: "",
        stTask: "",
        stPerson: "",
      });
      this.studentData2.push({
        stStage: index + 1,
        stName: "",
        stHead: "",
        stStart: "",
        stEnd: "",
        stTask: "",
        stPerson: "",
      });
      this.rowlength = this.studentData.length;
      console.log(this.studentData);
    },

    /**
     * 删除行
     * @param row
     */
    handleDeleteRow(row) {
      let datas = this.studentData;
      // console.log(datas);
      for (var i = 0; i < datas.length; i++) {
        if (datas[i].stStage == row.stStage) {
          datas.splice(i, 1);
        }
      }
    },

    inputClick() {
      this.innerVisible = true;
    },
    inputClick2() {
      this.innerVisible2 = true;
    },
    inputClickS1(scope) {
      console.log(scope.$index);
      this.scopeIndex = scope.$index;
      this.innerVisible3 = true;
    },
    inputClickS2(scope) {
      this.scopeIndex = scope.$index;
      this.innerVisible4 = true;
    },
    addDomain() {
      this.stage.domains.push({
        stName: "",
        stHead: "",
      });
    },
    change(node, list) {
      console.log(node.value);
      this.form.proHead = node.value;
      this.proHead = node.label;
      if (list.checkedKeys.length == 2) {
        //单选实现
        this.$refs.treeproHead.setCheckedKeys([node.value]);
      }
    },
    change3(node, list) {
      console.log(node.label);
      this.studentData[this.scopeIndex].stHead = node.value;
      if (list.checkedKeys.length == 2) {
        //单选实现
        this.$refs.treeproHead3.setCheckedKeys([node.value]);
      }
      this.studentData2[this.scopeIndex].stHead = node.label;
    },
    change4(node,list) {
   
      const xixi2 = list.checkedKeys.toString();
      console.log(xixi2);
      const labelArr = []
      list.checkedNodes.forEach(el => {
        labelArr.push(el.label)
      });
      this.studentData[this.scopeIndex].stPerson = xixi2;
      this.studentData2[this.scopeIndex].stPerson = labelArr;
    },
    change2(node,list) {
      const labelArr2 = []
      list.checkedNodes.forEach(el => {
        if(el.type == "USER"){
          labelArr2.push(el.label)
          console.log(labelArr2);
          const value = el.value.toString();
          console.log(value);
          this.peoplelist.push(value);
          this.proPerson = labelArr2;
        }
       
        console.log( el.label);
      });
      // console.log(node.label);
      // this.haha.push(node.label);
      // const xixi = this.haha.toString();
      // this.proPerson = xixi;
      // this.getSelectedNodes();
    },

    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      listProject(this.queryParams).then((response) => {
        this.postList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect2().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        proPerson: undefined,
        proEnd: undefined,
        proHead: undefined,
        proInfo: undefined,
        proName: undefined,
        proStart: undefined,
        proStatusid: undefined,
      };
      this.proPerson = undefined;
      this.proHead = undefined;
      this.studentData = [
        {
          stStage: 1,
          stName: "",
          stHead: "",
          stStart: "",
          stEnd: "",
          stTask: "",
          stPerson: "",
        },
        {
          stStage: 2,
          stName: "",
          stHead: "",
          stStart: "",
          stEnd: "",
          stTask: "",
          stPerson: "",
        },
      ];
      this.studentData2 = [
        {
          stStage: 1,
          stName: "",
          stHead: "",
          stStart: "",
          stEnd: "",
          stTask: "",
          stPerson: "",
        },
        {
          stStage: 2,
          stName: "",
          stHead: "",
          stStart: "",
          stEnd: "",
          stTask: "",
          stPerson: "",
        },
      ];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加项目";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      console.log(row, this.ids);
      this.reset();
      const id = row.id || this.ids;
      const id2 = {
        id: id,
      };
      getPost(id2).then((response) => {
        console.log("response", response);
        this.form = response.data[0];
        this.open = true;
        this.title = "修改气体";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
     
      const okokok = this.peoplelist.toString();
      this.form.proPerson = okokok;
      console.log(this.form);
      console.log(this.stage);
      console.log(this.studentData);
      const demo = { stageList: [] };
      demo.stageList = this.studentData;
      console.log("demo", demo);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updatePost(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProject(this.form).then((response) => {
              console.log(response);
              this.msgId = response.msg;
              this.studentData.forEach((el) => {
                el.stTask = this.msgId;
              });
        //       setTimeout(() => {
        //         addStage(demo).then((response) => {
        // console.log(response);
        //   this.$modal.msgSuccess("新增成功");
        //         this.open = false;
        //       this.getList();
        //     });
        //       }, 2000);
       this.$modal.msgSuccess("新增成功");
                this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row, type) {
      const rowID = [];
      rowID.push(row.id);
      if (type === 1) {
        this.$modal
          .confirm('是否确认删除设备编号为"' + row.id + '"的数据项？')
          .then(function () {
            return delRegion(rowID);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        let that = this;
        this.$modal
          .confirm("是否确认删除选择的数据项？")
          .then(function () {
            return delRegion(that.ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch((err) => {});
      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-dialog__footer {
  text-align: center;
}
// .el-tree-node{
//   .is-leaf + .el-checkbox .el-checkbox__inner{
//       display: inline-block;
//   }
//   .el-checkbox .el-checkbox__inner{
//       display: none;
//   }
// }
</style>
